<template>
  <div class="loginDiv">
    <div class="register_block">
      <div class="login_register">
        <div class="register-wrap">
          <h3><div class="logo"></div></h3>
          <h3><font color="black">注册</font></h3>
          <p class="login-wrap-p" v-show="showTishi">{{ tishi }}</p>
          <input
            type="text"
            placeholder="请输入用户昵称"
            v-model="userNickname"
          />
          <input type="text" placeholder="请输入账号名" v-model="userAccount" />
          <input
            type="password"
            placeholder="请输入密码"
            v-model="userPwd"
          />
          <input type="text" placeholder="请输入电话号码" v-model="userPhone" />
          <input type="text" placeholder="请输入邮箱" v-model="userEmail" />
          <button @click="register()">注册</button>
          <span
            v-on:click="ToLogin"
          ><font color="white">已有账号？马上登录</font></span
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { registerAccount } from '@/api/user'
export default {
  name: 'Register',

  data() {
    return {
      showTishi: false,
      userNickname: '',
      userAccount: '',
      userPwd: '',
      userPhone: '',
      userEmail: ''
    }
  },
  methods: {
    register() {
      console.log(this.userNickname, this.userAccount, this.userPwd, this.userPhone, this.userEmail)
      var result = 0
      if (this.userNickname != null && this.userAccount != null && this.userPwd.length >= 6 && this.userPhone != null && this.userEmail != null) {
        registerAccount({ nickName: this.userNickname, userAccount: this.userAccount, userPwd: this.userPwd, userPhone: this.userPhone, email: this.userEmail }).then(response => {
          console.log('response of register --' + response.data)
          result = response.data
          console.log(result)
          if (result > 0) {
            console.log('go to login')
            this.$router.push('/login')
            // this.$router.push({ path: this.redirect || '/' })
          }
          // this.$router.push({ path: this.redirect || '/' })
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}
body {
  margin: 0;
}
.login {
  /* position: relative;
  top: 200px;
  left:500px; */
  /* align-items: center; */
  position: fixed;
  /* top:225px;
  left: 650px; */
  width: 100%;
  height: 100%;
  background-color: #0f1015;
}
.login_change {
  width: 100%;
  height: 100%;
  background-color: #0f1015;
}
.loginDiv{
  width: 100%;
  height: 100%;
  background-image: url('../../assets/back_images/back_register.jpg');
}
.logo {
  display: inline-block;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-align: center;
  color: #fff;
  background: #C0C4CC;
  background-image: url('../../assets/logo/logo.jpg');
  width: 100px;
  height: 100px;
  line-height: 40px;
  font-size: 14px;
  background-repeat:no-repeat;
  background-size:100% 100%;
  -moz-background-size:100% 100%;
}
.register_block{
  position: absolute;
  top: 18%;
  left: 35%;
  width: 550px;
  height: 650px;
  border: dimgrey;
  border-radius: 6px;
  background:rgb(255, 255, 255);
  box-shadow: 3px 3px 1px #888888;
}
.login_register {
  // position: relative;
  // top: 22%;
  // left: 40%;
  position: relative;
  top: 15%;
  margin: 0 auto;
  width: 300px;
  height: 400px;
}
.icon {
  display: inline-block;
  width: 300px;
  height: 300px;
  // background-image: url("~@/../static/images/login_background2.jpg");
  background-position: center center;
  background-size: 100%;
  background-repeat: no-repeat;
}
/* 登录样式 */
.login-wrap {
  text-align: center;
}
input {
  display: block;
  width: 250px;
  height: 40px;
  line-height: 40px;
  margin: 0 auto;
  margin-bottom: 10px;
  outline: none;
  border: 1px solid #888;
  padding: 10px;
  box-sizing: border-box;
}
/* p{color:red;} */
button {
  display: block;
  width: 250px;
  height: 40px;
  line-height: 40px;
  margin: 0 auto;
  border: none;
  background-color: #41b883;
  color: #fff;
  font-size: 16px;
  margin-bottom: 5px;
}
span {
  cursor: pointer;
}
span:hover {
  color: #41b883;
}
.login-wrap-p {
  color: red;
}
/* 注册样式 */
.register-wrap {
  text-align: center;
}
input {
  display: block;
  width: 250px;
  height: 40px;
  line-height: 40px;
  margin: 0 auto;
  margin-bottom: 10px;
  outline: none;
  border: 1px solid #888;
  padding: 10px;
  box-sizing: border-box;
}
/* p{color:red;} */
button {
  display: block;
  width: 250px;
  height: 40px;
  line-height: 40px;
  margin: 0 auto;
  border: none;
  background-color: #41b883;
  color: #fff;
  font-size: 16px;
  margin-bottom: 5px;
}
span {
  cursor: pointer;
}
span:hover {
  color: #41b883;
}
#Self {
  background-color: #f5f5f5;
}
.head {
  margin: 1px 0px 0px 0px;
  height: 200px;
  width: 75%;
  position: relative;
  left: 12.5%;
  border: 1px solid #dbd6d6;
  box-shadow: 5px 5px 10px 5px #dbd6d6;
  // background-image: url("~@/../static/images/selfCenterHead_background.jpg");
  background-size: 100% 200px;
}
.userHead {
  margin: 10px 5px 5px 30px;
  display: flex;
  position: relative;
  top: 30%;
  width: 600px;
  height: 150px;
  color: black;
}
.head_background {
  position: relative;
  top: 25%;
}
.head_pic {
  width: 80px;
  height: 80px;
}
.user_head_pic {
  display: inline-block;
  width: 80px;
  height: 80px;
  // background-image: url("~@/../static/images/repush.png");
  background-position: center center;
  background-size: 80px 80px;
}
.head_basic {
  width: 120px;
  height: 80px;
  margin: 5px 5px 5px 5px;
}
.right_info {
  float: right;
}
.head_name {
  width: 80px;
  height: 50px;
}
.name {
  display: block;
  width: 100px;
  height: 50px;
  color: black;
}
/* .head_background{
} */
.selfContent {
  margin: 12px 0px 0px 0px;
  height: 600px;
  width: 75%;
  position: relative;
  left: 12.5%;
  border: 1px solid #dbd6d6;
  box-shadow: 5px 5px 10px 5px #dbd6d6;
  /* border-bottom: 1px solid #0000; */
}
.tab-hd {
  position: relative;
  height: 36px;
  margin: 15px 0;
  border-bottom: 1px solid #ddd;
}
.tab-hd a {
  float: left;
  padding: 8px 20px;
  margin-right: -1px;
  background: #fbfaf8;
  border: 1px solid #ddd;
  text-decoration: none;
  color: black;
}
.tab-hd a:hover {
  background: #fff;
  color: #4998df;
}
.tab-hd .now {
  padding: 8px 20px 7px;
  border-top: 2px solid #4998df;
  border-bottom: 1px solid #fff;
  background: #fff;
  z-index: 2;
}
.tab-item-span-a {
  text-decoration: none;
  color: #4998df;
  text-align: center;
}
.tab-item-span-a:hover {
  color: rgb(233, 72, 139);
}
.my_tag_span_btn {
  width: 100px;
  height: 50px;
  background-color: #4998df;
  text-align: center;
  vertical-align: baseline;
  line-height: 50px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
}
.my_tag_span_btn a {
  display: inline-block;
  width: 100px;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  color: white;
}
.my_tag_span_btn a:hover {
  color: rgb(233, 72, 139);
}
.my_tag_span_btn span {
  width: 100px;
  text-align: center;
  vertical-align: top;
  font-size: 18px;
}
.content_h1 {
  margin: 0px 0px 0px 15px;
}
.history {
  margin: 12px 0px 0px 0px;
  height: 600px;
  width: 75%;
  position: relative;
  left: 12.5%;
  border: 1px solid #dbd6d6;
  box-shadow: 5px 5px 10px 5px #dbd6d6;
}
.my_video {
  margin-left: 35px;
}
.my_article {
  margin-left: 35px;
}
.my_tag {
  margin-left: 35px;
}
.resultDiv {
  display: flex;
}
.singleContent {
  display: flex;
}
</style>
